<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
    <style type="text/css">
            body {
                line-height: 1.5;
                word-wrap: break-word; /*连续的数字或者英文就会不换行 得使用强制换行*/
                word-break: break-all; /*连续的数字或者英文就会不换行 得使用强制换行*/
            }
            .uinn-d {
                color: #ff6633;
                padding: .5em 1.5em;
                white-space: nowrap;
            }
            .change {
                box-shadow: inset 0 -1em .625em -1em #ff6600;
            }
            .box-sd {
                box-shadow: inset -1em 0 1em -1em #ff6600;
            }
            .fa-angle-right {
                color: #aaa9a9 !important;
            }
            .bc-text {
                color: #3c3c3c !important;
            }
            .lis{
                padding: .3em .5em .3em .3em;
            }
            .sc-text1{
                color:#636363;
            }
            .ub-img{webkit-background-size: auto 100%;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;}
.myclass{
   padding: .11em .3em 0 .3em;
  line-height: 1.5em;
  height: 1.5em;
  /*border-color: #ffbb33;*/
 border-color: #00b7fa;
  color:#00b7fa;
}
        </style>
    </head>
    <body class="um-vp bc-bg" ontouchstart>
        <div id="listview"></div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
   <script src="js/appcan.listview.js"></script>
 </body>
    <script>
    var id=5;
    var page=1;
    var rows=20;
    var resettype="2";
    appcan.ready(function() {
        getlist(id,page,rows);
         //设置控件是否响应滑动事件0,1
        //uexWindow.setMultilPopoverFlippingEnbaled(1); 
        uexWindow.setWindowScrollbarVisible(false); 
        appcan.initBounce();
            //上、下拉刷新页面，下拉清空内容后加载第一页
            appcan.frame.setBounce([0, 1], function(type) {
                resettype=type;
            }, function(type) {

            }, function(type) {
                if (type == 0) {
                     $("#listview").empty();
                    page = 1;
                    getlist(id,page,rows);
                } else {
                    page +=1;
                     getlist(id,page,rows);
                }
            })
        });
        
         function getlist(id,page,rows){
                var requesturl='http://apis.baidu.com/tngou/info/list';
                  appcan.request.ajax({
                    url :requesturl,
                    type : 'get',
                    data:{
                  id:id,
                  page:page,
                  rows:rows  
                },
                 headers: {"apikey":"61d35684d6ea7bebf32b8bbc972d8213"},
                    dataType : 'json',
                    success : function(data, status, xhr) {
                         //console.log(data)
                         var obj= data.tngou;
                        if (data.status&&obj.length>0) {
                            var lv = appcan.listview({
                                selector : "#listview",
                                type : "thickLineTmp",
                                hasIcon : true,
                                hasAngle : true,
                                hasSubTitle : false
                            });
                            var arrayObj = new Array();　
                            for (var i=0; i < obj.length; i++) {
                                var item = obj[i];
                                 var keywords= item.keywords.split(' ');
                                 var keywordshtml='';
                                 for(var j=1; j <keywords.length-1; j++){
                                 keywordshtml+='<div class="uba umar-l uc-a1 myclass">'+keywords[j]+'</div>';   
                                 }
                                 var subjson = {title : item.title,
                                                describe:'<div class="ub ut-m ub-ver t-a line2 ulev0">'+item.description+'</div>' ,
                                                note:'<div class="ub">'+keywordshtml+'</div>',
                                                icon:'http://tnfs.tngou.net/image/'+item.img,
                                                id:item.id};
                                arrayObj. push(subjson);
                            }
                            lv.add(arrayObj,1);
                            if(resettype==0||resettype==1){
                                  setTimeout(function() {//定时器里的内容最后才会执行
                                    appcan.frame.resetBounce(resettype);
                                }, 0);  
                            }
                            lv.on("click",function(obj,data,subObj){
                                console.log(data.id);
                                appcan.locStorage.setVal('recordid', data.id);
                                appcan.window.open('frame_next','frame_next.html',0);
                            })
                            
                        }else if(data.status&&obj.length==0){
                          appcan.window.openToast('无更多数据!','2000',8,0);  
                        }
                    },
                  error : function(xhr, status, errMessage) {
                     // alert(errMessage+"err");
                     appcan.window.openToast('获取数据失败!','2000',8,0);
                    }
                });
            };
 </script>
</html>
